<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "推荐",
    },
}
</route>

<template>
    <view class="m-base-box m-recommended">
        <wd-tabs v-model="tabWithBadge" @change="handleChange">
            <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`"> </wd-tab>
        </wd-tabs>
        <view class="m-recommended__list px-4 mt-3">
            <recommendItem :columns="list[tabWithBadge]"></recommendItem>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getRecommendUsingGet } from "@/service/app";
import recommendItem from "@/components/recommendItem.vue";
const tabWithBadge = ref(0);
const list = ref([]);
const tabsWithBadge = [
    { title: "美食", value: "FOOD" },
    { title: "住宿", value: "TRIP" },
    { title: "行程", value: "LIVE" },
];
function handleChange(e) {
    tabWithBadge.value = e.index;
    getRecommend();
}
function getRecommend() {
    if (list.value[tabWithBadge.value]?.length > 0) return;
    let type = tabsWithBadge[tabWithBadge.value].value;
    getRecommendUsingGet({ params: { type } }).then((res) => {
        list.value[tabWithBadge.value] = res?.data || [];
    });
}
onLoad(() => {
    getRecommend();
});
</script>

<style lang="scss" scoped>
.m-recommended {
    padding: 0 0 170rpx 0;
}
</style>
